<template>
  <d2-container>
    <template slot="header">
        <el-row>
          <el-col :span="12" style="font-size:28px">{{shop.name}}</el-col>
          <el-col :span="12" type="flex" justify="end">
            <el-button type="primary" @click="dialogVisible3 = true; incommodity.p_o_u = 0; incommodity.number = 1; incommodity.shop_id = sid">新增宠物</el-button>
            <el-button type="primary" @click="dialogVisible4 = true; incommodity.p_o_u = 1; incommodity.shop_id = sid">新增商品</el-button>
          </el-col>
        </el-row>
    </template>
    <el-dialog title="添加新宠物" :visible.sync="dialogVisible3" width="30%">
      <span>
        <h2>基本信息</h2>
        <el-input placeholder="请输入内容" v-model="incommodity.name" maxlength="10" show-word-limit>
          <template slot="prepend">宠物名称</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="incommodity.price" maxlength="10" show-word-limit>
          <template slot="prepend">宠物价格</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="incommodity.introduction" maxlength="30" show-word-limit>
          <template slot="prepend">宠物简介</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="incommodity.photo">
          <template slot="prepend">图片url</template>
        </el-input>
        宠物标签
        <el-radio v-model="radio2" label="1">{{type[0]}}</el-radio>
        <el-radio v-model="radio2" label="3">{{type[2]}}</el-radio>
        <br>
        <h2>宠物介绍</h2>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="incommodity.details">
        </el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="kong()">重置</el-button>
        <el-button type="primary" @click="insertcommodity(); dialogVisible3 = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加新商品" :visible.sync="dialogVisible4" width="30%">
      <span>
        <h2>基本信息</h2>
        <el-input placeholder="请输入内容" v-model="incommodity.name" maxlength="20" show-word-limit>
          <template slot="prepend">商品名称</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="incommodity.price" maxlength="10" show-word-limit>
          <template slot="prepend">商品单价</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="incommodity.number" maxlength="20" show-word-limit>
          <template slot="prepend">商品数量</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="incommodity.introduction" maxlength="30" show-word-limit>
          <template slot="prepend">商品简介</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="incommodity.photo">
          <template slot="prepend">图片url</template>
        </el-input>
        商品标签
        <el-radio v-model="radio2" label="2">{{type[1]}}</el-radio>
        <el-radio v-model="radio2" label="4">{{type[3]}}</el-radio>
        <el-radio v-model="radio2" label="5">{{type[4]}}</el-radio>
        <el-radio v-model="radio2" label="6">{{type[5]}}</el-radio>
        <h2>商品介绍</h2>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="incommodity.details">
        </el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="kong()">重置</el-button>
        <el-button type="primary" @click="insertcommodity(); dialogVisible4 = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-row :style="{height: '95%'}">
      <el-col :span="12" :style="{height: '100%'}">
        <el-row :style="{height: '50%'}">
          <el-col :span="24" :style="{height: '100%'}">
            评分分布
            <div id="row" :style="{width: '100%', height: '100%'}"/>
          </el-col>
        </el-row>
        <el-row :style="{height: '50%'}">
          <el-col :span="24" :style="{height: '100%'}">
            分数详情
            <div id="point" :style="{width: '100%', height: '100%'}"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" :style="{height: '100%'}">
        <!--宠物表-->
        宠物列表
        <el-row :style="{height: '50%'}">
          <el-col :span="24" :style="{height: '100%'}">
            <el-table :data="commodity0" style="width: 100%" border height="100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="图片">
                      <el-image style="width: 100px; height: 100px" :src="props.row.photo" fit="cover"/>
                    </el-form-item>
                    <el-form-item label="宠物简介">
                      <span>{{ props.row.introduction }}</span>
                    </el-form-item>
                    <el-form-item label="操作">
                      <el-button @click="getonecommodity(props.row.id)">修改宠物信息</el-button>
                      <el-dialog title="修改宠物信息" :visible.sync="dialogVisible" width="30%">
                        <span>
                          <h2>基本信息</h2>
                          <el-input placeholder="请输入内容" v-model="upcom.name" maxlength="10" show-word-limit>
                            <template slot="prepend">宠物名称</template>
                          </el-input>
                          <el-input placeholder="请输入内容" v-model="upcom.price" maxlength="10" show-word-limit>
                            <template slot="prepend">宠物价格</template>
                          </el-input>
                          <el-input placeholder="请输入内容" v-model="upcom.introduction" maxlength="30" show-word-limit>
                            <template slot="prepend">宠物简介</template>
                          </el-input>
                          <el-input placeholder="请输入内容" v-model="upcom.photo">
                            <template slot="prepend">图片url</template>
                          </el-input>
                          宠物状态
                          <el-radio v-model="radio" label="1">未售出</el-radio>
                          <el-radio v-model="radio" label="2">已售出</el-radio>
                          <br>
                          宠物标签
                          <el-radio v-model="radio2" label="1">{{type[0]}}</el-radio>
                          <el-radio v-model="radio2" label="3">{{type[2]}}</el-radio>
                          <br>
                          <h2>宠物介绍</h2>
                          <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入内容"
                            v-model="upcom.details">
                          </el-input>
                        </span>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="getonecommodity(props.row.id)">重置</el-button>
                          <el-button type="primary" @click="updatecommodity(); dialogVisible = false">确 定</el-button>
                        </span>
                      </el-dialog>
                      <p/>
                      <el-button type="danger" @click="opendel(props.row.id, sid)">删除宠物信息</el-button>
                    </el-form-item>
                    <el-form-item label="详细介绍">
                      <span>{{ props.row.details }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="宠物编号" prop="id" width="80"/>
              <el-table-column label="商品名称" prop="name"/>
              <el-table-column label="价格" width="100">
                <template slot-scope="pic">
                  <span>{{ pic.row.price }}￥</span>
                </template>
              </el-table-column>
              <el-table-column label="标签" width="50">
                <template slot-scope="scope">
                  <span>{{type[scope.row.type_id - 1]}}</span>
                </template>
              </el-table-column>
              <el-table-column label="出售信息" width="80">
                <template slot-scope="sel">
                  <span>{{ (sel.row.number == 1)?'未售出':'已售出' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!--商品表-->
        商品列表
        <el-row :style="{height: '50%'}">
          <el-col :span="24" :style="{height: '100%'}">
            <el-table :data="commodity1" style="width: 100%" border height="100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="图片">
                      <el-image style="width: 100px; height: 100px" :src="props.row.photo" fit="cover"/>
                    </el-form-item>
                    <el-form-item label="商品简介">
                      <span>{{ props.row.introduction }}</span>
                    </el-form-item>
                    <el-form-item label="操作">
                      <el-button @click="getonecommodity(props.row.id)">修改商品信息</el-button>
                      <el-dialog title="修改商品信息" :visible.sync="dialogVisible2" width="30%">
                        <span>
                          <h2>基本信息</h2>
                          <el-input placeholder="请输入内容" v-model="upcom.name" maxlength="20" show-word-limit>
                            <template slot="prepend">商品名称</template>
                          </el-input>
                          <el-input placeholder="请输入内容" v-model="upcom.price" maxlength="10" show-word-limit>
                            <template slot="prepend">商品单价</template>
                          </el-input>
                          <el-input placeholder="请输入内容" v-model="upcom.number" maxlength="20" show-word-limit>
                            <template slot="prepend">商品数量</template>
                          </el-input>
                          <el-input placeholder="请输入内容" v-model="upcom.introduction" maxlength="30" show-word-limit>
                            <template slot="prepend">商品简介</template>
                          </el-input>
                          <el-input placeholder="请输入内容" v-model="upcom.photo">
                            <template slot="prepend">图片url</template>
                          </el-input>
                          商品标签
                          <el-radio v-model="radio2" label="2">{{type[1]}}</el-radio>
                          <el-radio v-model="radio2" label="4">{{type[3]}}</el-radio>
                          <el-radio v-model="radio2" label="5">{{type[4]}}</el-radio>
                          <el-radio v-model="radio2" label="6">{{type[5]}}</el-radio>
                          <h2>商品介绍</h2>
                          <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入内容"
                            v-model="upcom.details">
                          </el-input>
                        </span>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="getonecommodity(props.row.id)">重置</el-button>
                          <el-button type="primary" @click="updatecommodity(); dialogVisible2 = false">确 定</el-button>
                        </span>
                      </el-dialog>
                      <p/>
                      <el-button type="danger" @click="opendel(props.row.id, sid)">删除商品信息</el-button>
                    </el-form-item>
                    <el-form-item label="详细介绍">
                      <span>{{ props.row.details }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="商品编号" prop="id" width="80"/>
              <el-table-column label="商品名称" prop="name"/>
              <el-table-column label="单价" width="80">
                <template slot-scope="pic">
                  <span>{{ pic.row.price }}￥</span>
                </template>
              </el-table-column>
              <el-table-column label="标签" width="80">
                <template slot-scope="scope">
                  <span>{{type[scope.row.type_id - 1]}}</span>
                </template>
              </el-table-column>
              <el-table-column label="库存" width="80">
                <template slot-scope="num">
                  <span>{{ num.row.number }}件</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </d2-container>
</template>

<script>
import { service, request } from '@/api/service'
import * as echarts from 'echarts'
export default {
  name: 'fyh_shopmore',
  data () {
    return {
      sid: '0',
      pointnum: [],
      shop: [],
      commodity0: [],
      commodity1: [],
      type: ['狗', '卫生用品', '猫', '食品', '玩具', '出行用品'],
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      upcom: [],
      radio: '1',
      radio2: '1',
      incommodity: {
        id: undefined,
        name: undefined,
        price: undefined,
        number: undefined,
        p_o_u: undefined,
        type_id: undefined,
        shop_id: undefined,
        details: undefined,
        introduction: undefined,
        photo: undefined,
        isdel: undefined
      },
    }
  },
  methods: {
    drawRow (pointnum) {
      var myChart = echarts.init(document.getElementById('row'))
      var option = {
        title: { text: '' },
        tooltip: {},
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: pointnum[0], name: '5分' },
              { value: pointnum[1], name: '4分' },
              { value: pointnum[2], name: '3分' },
              { value: pointnum[3], name: '2分' },
              { value: pointnum[4], name: '1分' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    drawLine (pointnum) {
      var myChart = echarts.init(document.getElementById('point'))
      var option = {
        title: { text: '' },
        tooltip: {},
        legend: { data: ['人数'] },
        xAxis: { data: ['5分', '4分', '3分', '2分', '1分'] },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar',
          data: pointnum
        }]
      }
      myChart.setOption(option)
    },
    getShopMore (i) {
      request({
        url: 'shop/getshopmore',
        method: 'get',
        params: {
          id: i
        }
      }).then(res => {
        this.shop = res.shop
        this.commodity0 = res.commoditylist0
        this.commodity1 = res.commoditylist1
      })
    },
    getShopPoint (i) {
      request({
        url: 'shop/getshoppoint',
        method: 'get',
        params: {
          id: i
        }
      }).then(res => {
        this.pointnum = res
        this.drawRow(this.pointnum)
        this.drawLine(this.pointnum)
      })
    },
    opendel (i, si) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delcommodity(i, si);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delcommodity(i, si){
      request({
        url: 'shop/delcommodity',
        method: 'get',
        params: {
          id: i,
          sid: si
        }
      }).then(res => {
        this.shop = res.shop;
        this.commodity0 = res.commoditylist0;
        this.commodity1 = res.commoditylist1;
      })
    },
    getonecommodity(i){
      request({
        url: 'shop/getonecommodity',
        method: 'get',
        params: {
          id: i
        }
      }).then(res => {
        this.upcom = res;
        if(this.upcom.number == 1) this.radio = '1';
        else this.radio = '2';
        this.radio2 = res.type_id + "";
        if(res.p_o_u == 0) this.dialogVisible = true;
        else this.dialogVisible2 = true; 
      })
    },
    updatecommodity(){
      if(this.upcom.p_o_u == 0){
        if(this.radio == '1') this.upcom.number = 1;
        else this.upcom.number = 0;
      }
      switch(this.radio2){
        case '1':
          this.upcom.type_id = 1;
          break;
        case '2':
          this.upcom.type_id = 2;
          break;
        case '3':
          this.upcom.type_id = 3;
          break;
        case '4':
          this.upcom.type_id = 4;
          break;
        case '5':
          this.upcom.type_id = 5;
          break;
        case '6':
          this.upcom.type_id = 6;
          break;
      }
      request({
        url: 'shop/updatecommodity',
        method: 'put',
        data: {
          id: this.upcom.id,
          name: this.upcom.name,
          price: this.upcom.price,
          number: this.upcom.number,
          p_o_u: this.upcom.p_o_u,
          type_id: this.upcom.type_id,
          shop_id: this.upcom.shop_id,
          details: this.upcom.details,
          introduction: this.upcom.introduction,
          photo: this.upcom.photo,
          isdel: this.upcom.isdel
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.shop = res.shop
        this.commodity0 = res.commoditylist0
        this.commodity1 = res.commoditylist1
      })
    },
    kong(){
      this.incommodity.id = undefined,
      this.incommodity.name = undefined,
      this.incommodity.price = undefined,
      this.incommodity.number = undefined,
      this.incommodity.p_o_u = undefined,
      this.incommodity.type_id = undefined,
      this.incommodity.shop_id = undefined,
      this.incommodity.details = undefined,
      this.incommodity.introduction = undefined,
      this.incommodity.photo = undefined,
      this.incommodity.isdel = undefined
    },
    insertcommodity(){
      switch(this.radio2){
        case '1':
          this.incommodity.type_id = 1;
          break;
        case '2':
          this.incommodity.type_id = 2;
          break;
        case '3':
          this.incommodity.type_id = 3;
          break;
        case '4':
          this.incommodity.type_id = 4;
          break;
        case '5':
          this.incommodity.type_id = 5;
          break;
        case '6':
          this.incommodity.type_id = 6;
          break;
      }
      request({
        url: 'shop/insertcommodity',
        method: 'put',
        data: {
          id: this.incommodity.id,
          name: this.incommodity.name,
          price: this.incommodity.price,
          number: this.incommodity.number,
          p_o_u: this.incommodity.p_o_u,
          type_id: this.incommodity.type_id,
          shop_id: this.sid,
          details: this.incommodity.details,
          introduction: this.incommodity.introduction,
          photo: this.incommodity.photo,
          isdel: this.incommodity.isdel
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        this.shop = res.shop
        this.commodity0 = res.commoditylist0
        this.commodity1 = res.commoditylist1
      })
    }
  },
  created () {
    this.sid = this.$route.params.sid
    if(this.sid == null){
      this.$store.dispatch('d2admin/page/closeAll')
    }
    else{
      this.getShopMore(this.sid)
      this.getShopPoint(this.sid)
    }
  },
  updated () {
    
  },
  mounted () {

  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 10;
  }
  .demo-table-expand label {
    margin-left: 20px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
